<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div class="topBox"></div>
		<div class="avaerTopBox f f-a-c f-j-b">
			<div class="leftAva f f-a-c f-d-c f-j-c">
				<div class="p-r">
					<img :src="obj.avatar || '/src/assets/tou.png'" class="avart" alt="" />
					<img v-if="obj.favorite" src="/src/assets/user/5.png" class="iconImg p-a" alt="" />
				</div>
				<!-- ----------------------------------------------------------------------------------- -->
				<!-- <button class="btn">Chat</button> -->
			</div>
			<div class="avaRig">
				<div class="topTitle f f-a-c f-j-b">
					<div class="topLeft f f-a-c">{{ obj.firstName }} {{ obj.lastName }}</div>
				</div>
				<!-- Response Time: Within 8h -->
				<div class="Response f f-a-c">
					<div class="responseItem">Last active: {{ getTimes(obj.lastLogin) }}</div>
				</div>
				<div class="investor">{{ joip }}</div>
				<!-- Topics:  -->
				<div class="topics f f-a-c">
					<div class="topicsLef">Topics:</div>
					<div v-for="(item, index) in obj.topicIds" :key="index" class="topicsRight hand">{{ item }}</div>
				</div>
				<!-- Language:  -->
				<div class="language f f-a-c">
					Language:
					<div class="languageCount">{{ language }}</div>
				</div>
				<!-- From $60/Customized -->
				<!-- iicon -->
				<div class="icon f f-a-c">
					<div @click="shareBtn" class="iconLef f f-a-c">
						<img src="/src/assets/user/10.png" alt="" />
						Share
					</div>
					<!-- <div v-if="myId != obj.userId" @click="reports(0)" class="iconLef hand f f-a-c">
						<img src="/src/assets/user/8.png" alt="" />
						Report
					</div> -->
				</div>
			</div>
		</div>
		<!-- About expert -->
		<div class="expert">
			<div class="topTit">About expert</div>
			<div class="count">
				{{ obj.myDescribe }}
			</div>
		</div>
		<!-- Professional experience -->
		<div class="expert">
			<div class="topTit">Professional experience</div>
			<div v-for="(item, index) in obj.workExperience" :key="index" class="bodyCon f f-a-c f-j-b">
				<div class="lef">{{ item.time }} {{ item.position }} @{{ item.company }}</div>
				<div class="rig">{{ item.location }}</div>
			</div>
		</div>
		<!-- Education  experience  -->
		<div class="expert">
			<div class="topTit">Professional experience</div>
			<div v-for="(item, index) in obj.educationExperience" :key="index" class="bodyCon f f-a-c f-j-b">
				<div class="lef">{{ item.school }} {{ item.degree }}</div>
				<div class="rig">{{ item.fieldOfStudy }}</div>
			</div>
		</div>
		<upLoad @reportObj="reportObj" ref="upLoads" />
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import { ElMessage, dayjs } from "element-plus";
	import { BuyUserinfo } from "@/api/knowClub/index.js";
	import { getTimes, copy } from "@/utils/setting.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	import userModule from "./userModule.vue";
	import upLoad from "./upLoad.vue";
	let statusTab = ref(1);
	let addRef = ref("");
	let obj = ref({});
	let joip = ref("");
	let upLoads = ref("");
	let stupShows = ref(false);
	let reviewShow = ref(false);
	let sectList = ref([
		{
			show: false
		},
		{
			show: false
		},
		{
			show: false
		}
	]);
	let list = ref([
		{
			stupShow: false,
			count: `As a SaaS founder, I understand the challenges that come with branding a SaaS product with a limited budget. However, it is possible to create a strong and recognizable brand without
						breaking the bank. Branding a SaaS product with a limited budget requires creativity and a deep understanding of your target audience. I had helped xxx with xxx for 5 years, growth 20% of
						sales within one week xxxx. How to xxx? What is xxx? Why xxx? Let me help you to build xxx!`,
			title: "I will help with: SaaS product branding with lower budget to $xxx a month for Startup"
		},
		{
			stupShow: false,
			count: `As a SaaS founder, I understand the challenges that come with branding a SaaS product with a limited budget. However, it is possible to create a strong and recognizable brand without
						breaking the bank. Branding a SaaS product with a limited budget requires creativity and a deep understanding of your target audience. I had helped xxx with xxx for 5 years, growth 20% of
						sales within one week xxxx. How to xxx? What is xxx? Why xxx? Let me help you to build xxx!`,
			title: "How does venture capital work in X and why do they NOT  to invest in your SaaS business? "
		},
		{
			stupShow: false,
			count: `As a SaaS founder, I understand the challenges that come with branding a SaaS product with a limited budget. However, it is possible to create a strong and recognizable brand without
						breaking the bank. Branding a SaaS product with a limited budget requires creativity and a deep understanding of your target audience. I had helped xxx with xxx for 5 years, growth 20% of
						sales within one week xxxx. How to xxx? What is xxx? Why xxx? Let me help you to build xxx!`,
			title: "Other topics /30min /60min"
		}
	]);
	onMounted(() => {
		getDetail();
		window.addEventListener("scroll", handleScroll);
	});
	const shareBtn = () => {
		const text = window.location.href;
		copy(text);
	};
	// 获取详情
	const getDetail = async () => {
		let n = await BuyUserinfo();
		obj.value = n.data;
		// 工作职位
		if (obj.value.workExperience[0]) {
			joip.value = obj.value.workExperience[0].position + "@" + obj.value.workExperience[0].company;
		}
	};
	// 点击添加
	const addInfo = () => {
		addRef.value.dialogTableVisible = true;
	};
	// 去预约订单
	const goCustomize = () => {
		router.push("/CustomizeOrder");
	};
	// 点击report
	const report = () => {
		upLoads.value.upLoadVisible = true;
	};
	const timeAgo = timestamp => {
		// return time.fromNow();
		const time = dayjs(timestamp);
		const now = +new Date();
		const diff = (now - timestamp) / 1000;
		console.log(diff, "111111111");
		if (diff < 60) {
			return `${diff} seconds ago`;
		} else if (diff < 3600) {
			const minutes = Math.floor(diff / 60);
			return `${minutes} ${minutes === 1 ? "minute" : "minutes"} ago`;
		} else if (diff < 86400) {
			const hours = Math.floor(diff / 3600);
			return `${hours} ${hours === 1 ? "hour" : "hours"} ago`;
		} else {
			const days = Math.floor(diff / 86400);
			return `${days} ${days === 1 ? "day" : "days"} ago`;
		}
	};
	// 切换分页
	const sizeChange = e => {
		console.log(e, "1111111");
	};
	// 切换分页
	const currentChange = e => {
		console.log(e, "1111111");
	};
	// 选择
	const reviewCheck = (item, num) => {
		sectList.value.forEach(element => {
			element.show = false;
		});
		sectList.value[num].show = !sectList.value[num].show;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
